<template>
    <div class="chart-container">
        <chart id="KuaiPieEchart" :height="data.options.height+'px'" :data="data" :width="data.options.width+'px'" :options="data.options"/>
    </div>
</template>

<script>
import {getNewEcharts} from '@/api/api'
var scaleData = [{
        'name': '总户数',
        'value': 1234
    },
    {
        'name': '总人口数',
        'value': 4700
    },
    {
        'name': '已覆盖户数',
        'value': 1200
    },
    {
        'name': '已覆盖人口数',
        'value': 3687
    }

];
var placeHolderStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        color: 'rgba(0, 0, 0, 0)',
        borderColor: 'rgba(0, 0, 0, 0)',
        borderWidth: 0
    }
};
var data = [];
var color =  ['#86D560', '#AF89D6', '#59ADF3', '#009DFF','#FF7D18','#86D560', '#AF89D6', '#59ADF3', '#009DFF','#FF7D18','#86D560', '#AF89D6', '#59ADF3', '#009DFF','#FF7D18'];
for (var i = 0; i < scaleData.length; i++) {
    data.push({
        data: scaleData[i].value,
        value: 20,
        name: scaleData[i].name,
        itemStyle: {
            normal: {
                color: color[i],
                borderWidth: 20,
                borderColor: color[i]
            }
        }
    }, {
        value: 8,
        name: '',
        itemStyle: placeHolderStyle
    });
}
data.push({
    value: 40,
    name: '',
    itemStyle: placeHolderStyle
})
var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [100, 200],
    hoverAnimation: false,
    startAngle: -30,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'inner',
                fontSize: 14,
                lineHeight: 15,
            },
            labelLine: {
                length: 30,
                length2: 60,
                show: true
            }
        }
    },
    data: data
}, {
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [100, 200],
    hoverAnimation: false,
    startAngle: -30,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'outside',
                fontSize: 18,
                formatter: function(params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < scaleData.length; i++) {
                        total += scaleData[i].value;
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    if (params.name !== '') {
                        return params.data.data;
                    } else {
                        return '';
                    }
                }
            },
            labelLine: {
                length: 30,
                length2: 60,
                show: true
            }
        }
    },
    data: data
}];
var options = {
    backgroundColor: '#fff',
    tooltip: {
        show: false
    },
    legend: {
        show: false
    },
    toolbox: {
        show: false
    },
    series: seriesObj,
}
import echart from '@/mixins/echart'
export default {
    name: 'KuaiPieEchart',
    mixins: [echart],
    created(){
        // this.data.options = JSON.parse(JSON.stringify({...this.data.options,...options}))
        this.data.options = {...this.data.options,...options}
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"pie",
                sourceId:this.data.options.sourceId,
                columnParam: {}
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    const data = res.data.seriesData
                    this.data.options.series[0].data = []
                    this.data.options.series[1].data = []
                    data.map((item,i)=>{
                        this.data.options.series[0].data.push({
                            data: item.value,
                            value: 20,
                            name: item.name,
                            itemStyle: {
                                normal: {
                                    color: color[i],
                                    borderWidth: 20,
                                    borderColor: color[i]
                                }
                            }
                        }, {
                            value: 8,
                            name: '',
                            itemStyle: placeHolderStyle
                        })
                        this.data.options.series[1].data.push({
                            data: item.value,
                            value: 20,
                            name: item.name,
                            itemStyle: {
                                normal: {
                                    color: color[i],
                                    borderWidth: 20,
                                    borderColor: color[i]
                                }
                            }
                        }, {
                            value: 8,
                            name: '',
                            itemStyle: placeHolderStyle
                        })
                    })
                }
            })
        }
    }
}
</script>
